<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>文档处理工具</title>    <link rel="icon" href="/assets/ico/7favicon.png" type="image/png">    <!-- 使用国内CDN -->    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">    <link href="css/common.css" rel="stylesheet">
    <style>
        /* 基础样式 */
        .bg-gray-50 { background-color: #f9fafb; }
        .bg-white { background-color: #ffffff; }
        .text-gray-900 { color: #111827; }
        .text-gray-700 { color: #374151; }
        .text-gray-600 { color: #4b5563; }
        .text-gray-500 { color: #6b7280; }
        .text-gray-400 { color: #9ca3af; }
        .text-blue-600 { color: #2563eb; }
        .text-green-500 { color: #10b981; }
        .text-red-500 { color: #ef4444; }
        
        /* 布局样式 */
        .min-h-screen { min-height: 100vh; }
        .max-w-7xl { max-width: 80rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mt-4 { margin-top: 1rem; }
        
        /* 组件样式 */
        .file-drop-zone {
            border: 2px dashed #cbd5e0;
            transition: all 0.3s ease;
        }
        .file-drop-zone.dragover {
            border-color: #4299e1;
            background-color: #ebf8ff;
        }
        .file-item {
            transition: all 0.3s ease;
        }
        .file-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        /* 浮动进度条样式 */
        .floating-progress {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 22rem;
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 1rem;
            z-index: 50;
            transition: all 0.3s ease;
            transform: translateY(150%);
            opacity: 0;
            border: 1px solid #e5e7eb;
        }
        
        .floating-progress.visible {
            transform: translateY(0);
            opacity: 1;
        }
        
        .floating-progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .stage-pills {
            display: flex;
            margin-bottom: 0.75rem;
            overflow-x: auto;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        .stage-pills::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        
        .stage-pill {
            flex-shrink: 0;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            margin-right: 0.5rem;
            background-color: #f3f4f6;
            color: #6b7280;
            white-space: nowrap;
        }
        
        .stage-pill.active {
            background-color: #dbeafe;
            color: #1e40af;
            font-weight: 500;
        }
        
        .stage-pill.completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .close-btn {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .close-btn:hover {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .minimize-btn {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-right: 0.5rem;
        }
        
        .minimize-btn:hover {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .floating-progress.minimized {
            width: auto;
            padding: 0.5rem;
        }
        
        .progress-content {
            transition: all 0.3s ease;
        }
        
        .floating-progress.minimized .progress-content {
            display: none;
        }
        
        .floating-progress.minimized .stage-pills {
            display: none;
        }
        
        .floating-progress.minimized .floating-progress-title {
            display: none;
        }
        
        .expand-btn {
            display: none;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            align-items: center;
            justify-content: center;
            background-color: #dbeafe;
            color: #1e40af;
            cursor: pointer;
        }
        
        .floating-progress.minimized .expand-btn {
            display: flex;
        }
        
        /* 进度条美化样式 */
        .progress-container {
            position: relative;
            padding: 1.5rem;
            border-radius: 0.75rem;
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }
        .progress-container:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        .progress-stage {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        .progress-bar-wrapper {
            height: 0.75rem;
            background-color: #e5e7eb;
            border-radius: 9999px;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .progress-bar {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.5s ease, background-color 0.3s ease;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: 1rem 1rem;
            animation: progress-bar-stripes 1s linear infinite;
        }
        @keyframes progress-bar-stripes {
            0% { background-position: 1rem 0; }
            100% { background-position: 0 0; }
        }
        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-top: 0.5rem;
        }
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-badge.processing {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .status-badge.uploading {
            background-color: #e0f2fe;
            color: #0369a1;
        }
        .status-badge.analyzing {
            background-color: #f0fdf4;
            color: #166534;
        }
        .status-badge.finishing {
            background-color: #ecfdf5;
            color: #047857;
        }
        .status-indicator {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 9999px;
            margin-right: 0.5rem;
        }
        .status-indicator.active {
            background-color: currentColor;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px currentColor;
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 悬浮操作栏样式 */
        .floating-action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4px);
            padding: 1rem;
            z-index: 40;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .floating-action-bar.visible {
            transform: translateY(0);
        }
        
        /* 为底部留出空间，防止内容被悬浮栏遮挡 */
        .content-padding-bottom {
            padding-bottom: 5rem;
        }
        
        /* 模态框样式 */
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }
        .modal-content {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            max-width: 24rem;
            width: 100%;
            margin: 0 1rem;
        }
    </style>
    <!-- 登录检查 -->
    <script>
        // 页面加载前检查登录状态
        if (!sessionStorage.getItem('isLoggedIn') || !sessionStorage.getItem('jwtToken')) {
            console.log('未检测到登录状态或JWT令牌，重定向到登录页面');
            window.location.href = 'login.html';
        }
    </script>
    <!-- 资源加载失败处理 -->
    <script>
        window.addEventListener('error', function(e) {
            if (e.target.tagName === 'LINK' || e.target.tagName === 'SCRIPT') {
                console.error('资源加载失败:', e.target.href || e.target.src);
                // 如果CDN资源加载失败，尝试加载本地资源
                if (e.target.href && e.target.href.includes('cdn.bootcdn.net')) {
                    const localPath = e.target.href.split('/').pop();
                    e.target.href = 'css/' + localPath;
                }
            }
        }, true);
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen content-padding-bottom">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-sm">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <i class="fas fa-file-word text-blue-600 text-2xl mr-2"></i>
                            <span class="text-xl font-semibold text-gray-900">文档处理工具</span>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <a href="/index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
                            <i class="fas fa-home mr-1"></i>返回首页
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
            <!-- 功能说明卡片 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h2 class="text-base font-semibold text-gray-900 mb-3">使用说明</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="feature-card bg-blue-50 rounded-lg p-3">
                        <div class="text-blue-600 text-xl mb-1">
                            <i class="fas fa-file-word"></i>
                        </div>
                        <h3 class="font-medium text-gray-900 text-sm mb-1">Word文档处理（将解析版更改为答案在试题后）</h3>
                        <p class="text-gray-600 text-xs">支持.doc和.docx格式的Word文档自动处理</p>
                    </div>
                    <div class="feature-card bg-green-50 rounded-lg p-3">
                        <div class="text-green-600 text-xl mb-1">
                            <i class="fas fa-magic"></i>
                        </div>
                        <h3 class="font-medium text-gray-900 text-sm mb-1">智能分析</h3>
                        <p class="text-gray-600 text-xs">自动分析文档内容，基于算法处理文档，避免公式图片丢失；公式或图片较多的文档，处理速度会较慢，请耐心等待</p>
                    </div>
                    <div class="feature-card bg-red-100 border-2 border-red-500 rounded-lg p-3 animate-pulse shadow-md">
                        <div class="flex justify-between items-start">
                            <div class="text-red-600 text-xl mb-1">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="bg-red-600 text-white px-2 py-1 text-xs rounded-full font-bold flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                <span>重要!</span>
                            </div>
                        </div>
                        <h3 class="font-bold text-red-800 text-sm mb-1 flex items-center">
                            <span class="mr-1">重要提示</span>
                            <i class="fas fa-exclamation-circle text-red-500"></i>
                        </h3>
                        <p class="text-red-700 text-xs font-medium">因公式及文档标签等不确定性较多；请务必核对处理好的文档有无内容丢失；如若上传的文档未被处理或处理有误，为格式不支持请手动处理；上传的文档需要为标准试卷，包含【答案】、或者【解析】标签!</p>
                    </div>
                </div>
            </div>

            <!-- 文件上传区域 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <div class="text-center mb-3">
                    <i class="fas fa-file-upload text-2xl text-blue-500 mb-1"></i>
                    <h3 class="text-base font-semibold text-gray-700">上传文档</h3>
                    <p class="text-xs text-gray-500">支持.doc和.docx格式</p>
                </div>
                <div class="file-drop-zone border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-500 transition-colors duration-200"
                     id="docDropZone">
                    <input type="file" id="docFileInput" class="hidden" accept=".doc,.docx">
                    <div class="space-y-1">
                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-400"></i>
                        <p class="text-sm text-gray-500">点击或拖拽文件到此处</p>
                        <p class="text-xs text-gray-400">支持.doc和.docx格式，最大20MB</p>
                    </div>
                </div>
                <div id="fileList" class="mt-3 space-y-2"></div>
            </div>

            <!-- 处理按钮 -->
            <div class="mt-4 text-center">
                <button id="processAndDownloadButton" 
                        class="bg-green-500 text-white px-8 py-3 rounded-lg hover:bg-green-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-base font-medium shadow-md"
                        disabled>
                    <i class="fas fa-cog mr-2"></i>处理并下载
                </button>
            </div>

            <!-- 进度显示区域 -->
            <div id="progressArea" class="mt-6 hidden">
                <!-- 用于存放进度显示相关元素 -->
                <div style="display:none">
                    <div id="progressBar"></div>
                    <div id="progressText"></div>
                    <div id="statusText"></div>
                </div>
                <!-- 移除整个主进度条区域 -->
            </div>

            <!-- 结果区域 -->
            <div id="resultArea" class="mt-6 hidden">
                <div class="progress-container bg-green-50 border border-green-100">
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-500 text-3xl mb-4">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">处理完成！</h3>
                        <p class="text-sm text-gray-600 mb-4">文档已处理完成，系统正在为您下载文件</p>
                        
                        <div class="py-3 px-4 bg-green-100 rounded-lg text-green-800 text-sm mb-4 inline-block">
                            <div class="flex items-center">
                                <i class="fas fa-download mr-2"></i>
                                <span>如果下载未自动开始，请检查浏览器是否阻止了下载</span>
                            </div>
                        </div>
                        
                        <button id="doneButton" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors shadow-md">
                            <i class="fas fa-check mr-1"></i> 完成
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 分析结果区域 - 移除 -->
            <div id="analysisArea" class="hidden"></div>
        </main>
    </div>

    <!-- 底部悬浮操作栏 - 移除 -->
    <div id="floatingActionBar" class="hidden"></div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div class="flex items-center justify-center mb-4">
                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
            </div>
            <p class="text-center text-gray-700" id="loadingText">正在处理中，请稍候...</p>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="errorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div class="text-red-500 text-4xl mb-4 text-center">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2 text-center">处理失败</h3>
            <p class="text-sm text-gray-500 mb-4 text-center" id="errorMessage"></p>
            <div class="flex justify-center">
                <button type="button" id="closeErrorModal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 重要提示模态框 -->
    <div id="importantNoticeModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 border-2 border-red-500 shadow-xl">
            <div class="flex items-center justify-center">
                <div class="bg-red-100 rounded-full p-3 mb-4">
                    <div class="text-red-500 text-4xl animate-pulse">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
            <h3 class="text-xl font-bold text-red-700 mb-4 text-center">文档处理提示</h3>
            <div class="bg-red-50 p-4 rounded-lg mb-4 border-l-4 border-red-500">
                <p class="text-red-700 mb-2 font-medium">因文档格式复杂性，请注意以下重要事项：</p>
                <ul class="list-disc pl-5 text-red-600 space-y-2">
                    <li class="font-medium">请务必核对处理后的文档是否有内容丢失或错位</li>
                    <li>如文档包含复杂公式、表格或特殊格式，可能会影响处理结果</li>
                    <li>大量图片或嵌入对象的文档可能处理速度较慢，请耐心等待</li>
                    <li>如文档包含特殊字体，可能在处理后显示不正确</li>
                    <li>特殊格式的文档（如带有宏、OLE对象等）可能无法正确处理</li>
                </ul>
            </div>
            
            <div class="bg-yellow-50 p-4 rounded-lg mb-4 border-l-4 border-yellow-500">
                <p class="text-yellow-700 mb-2 font-semibold">可能的处理失败情况：</p>
                <ul class="list-disc pl-5 text-yellow-600 space-y-1">
                    <li>文档过大（超过20MB）或过于复杂</li>
                    <li>文档加密或受密码保护</li>
                    <li>文档包含不支持的嵌入对象</li>
                    <li>文档格式已损坏或不符合标准规范</li>
                </ul>
            </div>
            
            <div class="bg-blue-50 p-4 rounded-lg mb-4 border-l-4 border-blue-500">
                <p class="text-blue-700 mb-2 font-medium">建议操作：</p>
                <ul class="list-disc pl-5 text-blue-600 space-y-1">
                    <li>处理前备份原文档</li>
                    <li>处理完成后仔细检查文档内容</li>
                    <li>若处理结果不理想，请手动调整或联系管理员</li>
                </ul>
            </div>
            
            <div class="flex justify-center">
                <button type="button" id="closeImportantNoticeModal" class="px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors font-medium">
                    我已了解
                </button>
            </div>
        </div>
    </div>

    <!-- 服务状态模态框 -->
    <div id="statusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div id="statusIcon" class="text-4xl mb-4 text-center">
                <!-- 图标将根据状态动态插入 -->
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2 text-center" id="statusTitle">服务状态</h3>
            <div class="mb-4">
                <div class="flex items-center justify-between py-2 border-b">
                    <span class="text-sm text-gray-600">Java服务:</span>
                    <span id="javaStatus" class="text-sm font-medium"></span>
                </div>
                <div class="flex items-center justify-between py-2 border-b">
                    <span class="text-sm text-gray-600">Python服务:</span>
                    <span id="pythonStatus" class="text-sm font-medium"></span>
                </div>
                <div class="flex items-center justify-between py-2">
                    <span class="text-sm text-gray-600">整体状态:</span>
                    <span id="overallStatus" class="text-sm font-medium"></span>
                </div>
            </div>
            <div class="flex justify-center">
                <button type="button" id="closeStatusModal" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 会话过期模态框 -->
    <div id="sessionExpiredModal" class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 relative z-10 transform transition-all duration-300">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-20 h-20 rounded-full mx-auto mb-4 bg-red-100">
                    <i class="fas fa-exclamation-circle text-4xl text-red-600"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-1">会话已过期</h3>
                <p class="text-gray-600">您的登录会话已过期，请重新登录后继续操作。</p>
            </div>
            <div class="pt-2 border-t border-gray-200">
                <div class="flex justify-center mt-4">
                    <button type="button" id="reloginBtn" class="flex items-center justify-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition duration-200 shadow-md hover:shadow-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        重新登录
                    </button>
                </div>
                <p class="text-center text-gray-500 text-sm mt-3" id="redirectTimer">5秒后自动跳转至登录页面...</p>
            </div>
        </div>
    </div>

    <!-- 添加浮动进度条 -->
    <div id="floatingProgress" class="floating-progress" style="display: none;">
        <div class="floating-progress-header">
            <div class="flex items-center">
                <div class="expand-btn">
                    <i class="fas fa-expand-alt"></i>
                </div>
                <h3 class="text-sm font-medium text-gray-900 floating-progress-title flex items-center">
                    <i class="fas fa-tasks text-blue-600 mr-2"></i>
                    文档处理进度
                </h3>
            </div>
            <div class="flex">
                <div class="minimize-btn">
                    <i class="fas fa-minus"></i>
                </div>
                <div class="close-btn">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        
        <div class="stage-pills">
            <div class="stage-pill" data-stage="1">文件上传</div>
            <div class="stage-pill" data-stage="2">解析内容</div>
            <div class="stage-pill" data-stage="3">处理格式</div>
            <div class="stage-pill" data-stage="4">生成文档</div>
        </div>
        
        <div class="progress-content">
            <div class="progress-bar-wrapper">
                <div id="floatingProgressBar" class="progress-bar bg-blue-600" style="width: 0%"></div>
            </div>
            <div class="progress-info">
                <p id="floatingStatusText" class="text-sm text-gray-600">准备处理文档...</p>
                <span id="floatingProgressText" class="text-sm font-medium text-blue-600">0%</span>
            </div>
        </div>
    </div>

    <script src="js/api.js"></script>
    <script src="js/document-process.js"></script>
    <!-- 修改JavaScript部分，处理浮动进度条 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 浮动进度条元素
            const floatingProgress = document.getElementById('floatingProgress');
            const minimizeBtn = document.querySelector('.minimize-btn');
            const expandBtn = document.querySelector('.expand-btn');
            const closeBtn = document.querySelector('.close-btn');
            const doneButton = document.getElementById('doneButton');
            
            // 浮动进度条控制
            if (minimizeBtn) {
                minimizeBtn.addEventListener('click', function() {
                    floatingProgress.classList.add('minimized');
                });
            }
            
            if (expandBtn) {
                expandBtn.addEventListener('click', function() {
                    floatingProgress.classList.remove('minimized');
                });
            }
            
            if (closeBtn) {
                closeBtn.addEventListener('click', function() {
                    floatingProgress.classList.remove('visible');
                    setTimeout(() => {
                        floatingProgress.style.display = 'none';
                    }, 300);
                });
            }
            
            if (doneButton) {
                doneButton.addEventListener('click', function() {
                    document.getElementById('resultArea').classList.add('hidden');
                    floatingProgress.classList.remove('visible');
                    setTimeout(() => {
                        floatingProgress.style.display = 'none';
                    }, 300);
                });
            }
            
            // 修改文件上传事件
            const processAndDownloadButton = document.getElementById('processAndDownloadButton');
            if (processAndDownloadButton) {
                const originalClick = processAndDownloadButton.onclick;
                processAndDownloadButton.onclick = function(e) {
                    // 显示浮动进度条
                    floatingProgress.style.display = 'block';
                    setTimeout(() => {
                        floatingProgress.classList.add('visible');
                    }, 10);
                    
                    // 执行原始点击事件
                    if (originalClick) {
                        return originalClick.call(this, e);
                    }
                };
            }
        });
    </script>
</body>
</html> 